<template>
  <el-dialog
    v-model="props.addDialog"
    title="维修转交"
    width="30%"
    :show-close="false"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-form :model="form" ref="formRef">
      <el-form-item
        label="原维修人员"
        prop="originalUserIds"
        :rules="{
          required: true,
          message: '请选择维修人',
          trigger: 'change'
        }"
      >
        <el-select
          v-model="form.originalUserIds"
          filterable
          multiple
          collapse-tags
          collapse-tags-tooltip
          style="width: 80%; margin-right: 15px"
          placeholder="可搜索姓名/下拉选择维修人(可多选)"
          @change="primaryCheckUserChange"
        >
          <el-option
            v-for="item in primaryCheckUsers"
            :label="item.userName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="维修转交至"
        prop="transmitName"
        :rules="{
          required: true,
          message: '请选择维修人',
          trigger: 'change'
        }"
      >
        <el-select
          v-model="form.transmitName"
          filterable
          placeholder="可搜索姓名/下拉选择维修人"
          @change="checkUserChange"
          style="width: 80%; margin-right: 15px"
        >
          <el-option
            v-for="item in checkUsers"
            :label="item.realName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <div style="display: flex; width: 100%">
          <el-form-item
            label="转交原因"
            style="width: 100%; margin-right: 15px"
            :prop="form.reason"
          >
            <el-input
              v-model="form.reason"
              type="textarea"
              placeholder="请输入原因"
              maxlength="100"
              show-word-limit
              style="width: 100%"
              :rows="3"
            />
          </el-form-item>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel(formRef)">取消</el-button>
        <el-button type="primary" @click="submit(formRef)" :loading="loading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance } from 'element-plus'
import { ref, watch } from 'vue'
import { repairBatchTransmit, getRepairUserList } from '/@/api/repair'
import { getDirectorListApi } from '/@/api/publicApi'
const props = defineProps({
  addDialog: Boolean,
  primaryForm: Object
})
const emit = defineEmits(['addCancel', 'addSubmit'])
const formRef = ref<FormInstance>()
const loading = ref(false)
const formLabelWidth = ref('100px')
const form = ref({
  originalUserIds: [] as any, //原处理人id
  originalUserNames: [] as any,
  transmitUserId: '', //新处理人id
  transmitName: '', //新处理人姓名
  reason: '' //原因
})

//原维修人
const primaryCheckUsers = ref<any>([])
const getPrimaryCheckUsers = () => {
  getRepairUserList().then((res) => {
    if (res.code == 0) {
      primaryCheckUsers.value = res.data
    }
  })
}
// getPrimaryCheckUsers()
const primaryCheckUserChange = (val: any) => {
  // form.value.originalUserIds = []
  // form.value.originalUserNames = []
  // primaryCheckUsers.value.forEach((i: any) => {
  //     val.forEach((element: any) => {
  //         if (i.checkUser === element) {
  //             console.log("=====", '进来一次');
  //             // form.value.originalUserIds.push(i.checkUser)
  //             form.value.originalUserNames.push(i.checkUserName)
  //         }
  //     });
  // });
}

//新维修人
const checkUsers = ref<any>([])
const getCheckUser = () => {
  getDirectorListApi(4).then((res) => {
    if (res.code == 0) {
      checkUsers.value = res.data
    }
  })
}
getCheckUser()
const checkUserChange = (val: any) => {
  checkUsers.value.forEach((i: any) => {
    if (i.id == val) {
      form.value.transmitUserId = i.id
      form.value.transmitName = i.realName
    }
  })
}

const submit = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      repairBatchTransmit(form.value)
        .then((res) => {
          if (res.code == 0) {
            ElMessage.success('转交成功')
            loading.value = false
            form.value = {
              originalUserIds: [] as any, //原处理人id
              originalUserNames: [] as any,
              transmitUserId: '', //新处理人id
              transmitName: '', //新处理人姓名
              reason: '' //原因
            }
            emit('addSubmit')
          } else {
            loading.value = false
          }
        })
        .catch((res) => {
          loading.value = false
        })
    } else {
      loading.value = false
    }
  })
}

const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  form.value = {
    originalUserIds: [] as any, //原处理人id
    originalUserNames: [] as any,
    transmitUserId: '', //新处理人id
    transmitName: '', //新处理人姓名
    reason: '' //原因
  }
  emit('addCancel')
}
watch(
  () => props.addDialog,
  () => {
    getPrimaryCheckUsers()
  }
)
</script>
<style scoped lang="scss">
.addList {
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>
